<!--
Copyright (C) 2020 Yoann QUERET <yoann@queret.net>
-->

<!--
This file is part of ODR-EncoderManager.

ODR-EncoderManager is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

ODR-EncoderManager is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with ODR-EncoderManager.  If not, see <http://www.gnu.org/licenses/>.
-->


<!DOCTYPE html>
<html lang="en">

{% include 'head.html' %}

<body>
    {% include 'body-nav.html' %}

    <div class="container-fluid">

        <div class="page-header">
            <h1>Manage encoder</h1>
        </div>

        <!-- Modal -->
        <div id="modal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Loading ...</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            </div>

        </div>
        </div>

        <form class="form-horizontal" role="form">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <span class="glyphicon glyphicon-transfer"></span> <a data-toggle="collapse" data-parent="#accordion" href="#collapseCODER">Manage encoder</a>
                    </h4>
                </div>
                <div id="collapseCODER" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <p>Add, Remove, Edit available encoder.</p>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="btn_save"></label>
                            <div class="col-sm-8">
                                <div class="alert alert-warning">
                                    <strong>Warning!</strong> If you remove existing and running coder, they will be stopped and deleted.
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="coder_name">Encoder:</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="coder_name" value="" placeholder="Name">
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="coder_description" value="" placeholder="Description"> 
                                    <span class="input-group-btn">
                                        <button class="btn btn-success" id="btn_coder_add" type="button"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div id="coder_available">
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="btn_save"></label>
                            <div class="col-sm-3">
                                <a href="#" class="btn btn-primary" id="btn_coder_save" data-toggle="tooltip" data-placement="top" title="Apply changes. Add/Remove encoder."><span class="glyphicon glyphicon-save"></span> Write changes</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

    </div>
</body>
</html>
